<template>
  <article class="card" :data-id="item.id">
    <div class="cover" v-if="!noImage">
      <Transition>
        <img v-if="loaded" :src="item.coverImageUrl" alt="图片" />
        <SpellaiShimmer v-else class="shimmer" />
      </Transition>
    </div>
    <div class="body" v-if="!onlyImage">
      <div class="author">
        <div class="avatar">
          <img :src="item.userIcon" :alt="item.userName" />
          <span>{{ item.userName }}</span>
        </div>
      </div>

      <div class="prompt font-600">{{ feedTagsStr(item.feedTags) }}</div>
    </div>
  </article>
</template>

<script setup lang="ts">
import { onBeforeMount, ref } from 'vue'
import type { ItemOption } from './types'
import SpellaiShimmer from '@/components/SpellaiShimmer.vue'

const props = withDefaults(
  defineProps<{
    item: ItemOption
    onlyImage?: boolean
    noImage?: boolean
    width?: string
  }>(),
  {
    onlyImage: false,
    noImage: false,
    width: '100%'
  }
)
const feedTagsStr = (feedTags?: string[]) =>
  feedTags?.reduce((prev, value) => `${prev} #${value}`, '').trim()

const loaded = ref(false)
const height = ref('auto')

onBeforeMount(() => {
  if (!props.noImage) {
    height.value = '100%'
    new Promise((resolve) => {
      const image = new Image()
      image.src = props.item.coverImageUrl || ''
      if (image.complete) {
        loaded.value = true
        resolve(true)
        return
      }

      image.onload = () => {
        loaded.value = true
        resolve(true)
      }

      image.onerror = (error) => {
        console.error(props.item.coverImageUrl, error)
        loaded.value = true
        resolve(true)
      }
    })
  }
})
</script>

<style scoped lang="scss">
.card {
  display: flex;
  flex-direction: column;
  width: v-bind(width);
  height: v-bind(height);
  overflow: hidden;
  background: black;
  border-radius: 10px;
  color: #f0f0f0;
  cursor: pointer;

  .cover {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.20);
    overflow: hidden;
    border-radius: 10px;

    img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
      position: absolute;
    }

    .shimmer {
      position: absolute;
    }
  }

  .body {
    flex-shrink: 0;
    box-sizing: border-box;
    height: fit-content;
    padding: 6px;

    h3 {
      margin: 0;
      padding: 0;
      font-weight: bolder;
      font-size: 14px;
    }

    .author {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;

      .avatar {
        display: flex;
        flex-direction: row;
        align-items: center;

        img {
          width: 20px;
          height: 20px;
          object-fit: cover;
          border-radius: 50%;
        }

        span {
          margin-left: 4px;
          overflow: hidden;
          font-size: 14px;
          font-weight: 700;
          white-space: nowrap;
          text-overflow: ellipsis;
        }
      }
    }

    .prompt {
      font-size: 12px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      color: #9c9898;
    }
  }
}

.v-enter-active,
.v-leave-active {
  opacity: 1;
  transition: all 0.4s linear;
  will-change: opacity;
}

.v-enter-from,
.v-leave-to {
  opacity: 0;
  will-change: opacity;
}
</style>
